<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border: 1px solid blue;
        }
        p{
            border: 1px solid rgb(247, 58, 10);
        }
        .box{
            width: 500px;
	        height: 500px;
	        border: 100px solid blue;
	        border-top-color: red;
	        border-top-width: 1000px;
            border-bottom: none;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="" name="" v-model='message'><br>
    <span v-bind='message'></span>
  
</div>
    <script type="text/javascript">
        var data = {
            message:''
        }
        var input = document.querySelector('[v-model=message]')
        // var span = document.querySelector('[v-bind=message]')
        input.onkeyup=function(){
            data.message = input.value
            // span.innerHTML= data.message
            // data.message 发生改变 触发 Object.defineproperty
        }
    
        Object.defineProperty(data, 'message', {
            // set 接受唯一参数，即该属性新的参数值。
            set(newValue){
                var span = document.querySelector('[v-bind=message]')
                span.innerHTML=newValue
                this.value = newValue
                console.log(this)
            },
            // get 方法执行时没有参数传入
            get(){
                //将newValue 返回给 message
                return this.value
            }
    
        })

        var obj = {
  foo: function(){
    console.log(this)
  }
}
obj.foo()

function func(){
  console.log(this)
}

func.call(undefined) // 可以简写为 func.call()

    
    </script>
</body>
</html>